<template>
  <div class="echarts-wall">
    <div class="dot-bg" v-if="loading"></div>
    <div class="dot-elastic dotClass" v-if="loading"></div>
    <div class="echarts-content" ref="echartsDom"></div>
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "HorizontalBar"
});

const props = defineProps({
  grid: {
    type: Object, default: function () {
      return {
        left: '80',
        top: '10',
        right: '80',
        bottom: '20'
      }
    }
  },
  barColor: {
    type: Array, default: function () {
      return ['#00A3E0']
    }
  },
  rightFontColor: {type: String, default: '#00A3E0'},
  seriesLabelColor: {type: String, default: '#fff'},

  url: {
    type: String, default: ''
  },
  params: {
    type: Object, default: {}
  }
});
// @ts-ignore
import {getCurrentInstance, onMounted, ref, watch} from "vue";

const loading = ref<boolean>(false);
// @ts-ignore
import screenConfig from '@/components/global/bigscreen/screen_config'

// @ts-ignore
let {proxy} = getCurrentInstance()
// dom 组件
const echartsDom = ref<any>(null);
let myEcharts: any = null;

onMounted(() => {
  getData().then((option) => {
    myEcharts = proxy.$echarts.init(echartsDom.value);
    if (myEcharts) {
      myEcharts.clear();
      myEcharts.setOption(option)
    }
  })
})


const getData = () => {
  return new Promise((resolve, reject) => {
    if (props.url) {
      proxy.$http.post(props.url, props.params)
          .then((apiResponse: any) => {
            if (apiResponse.success || apiResponse.data) {
              let echartsData = apiResponse.data.echartsData;
              let i = 0;
              let xData: any = []
              let xValue: any = []
              Object.keys(echartsData).forEach((key: string) => {
                if (i === 0) {
                  for (let x = 0; x < echartsData[key].length; x++) {
                    let data = echartsData[key][x];
                    xData.push(data.name);
                    xValue.push(data.value);
                  }
                }
              });
              let option: any = {
                backgroundColor: 'transparent',
                tooltip: {
                  showContent: true,
                  trigger: 'item',
                  backgroundColor: 'rgba(8,36,68,.7)',
                  color: '#fff',
                  textStyle: {
                    color: '#fff',
                  },
                },
                legend: {
                  show: false,
                  top: '0%',
                  right: '10',
                  icon: 'rect',
                  itemWidth: 13,
                  itemHeight: 13,
                  textStyle: {
                    color: 'rgba(250,250,250,0.6)',
                    fontSize: 16,
                  },
                },
                grid: props.grid,
                xAxis: [
                  {
                    splitLine: {
                      show: false,
                    },
                    type: 'value',
                    show: false,
                  },
                ],
                yAxis: [
                  {
                    splitLine: {
                      show: false,
                    },
                    axisLine: {
                      //y轴
                      show: false,
                    },
                    type: 'category',
                    axisTick: {
                      show: false,
                    },
                    inverse: true,
                    data: xData,
                    axisLabel: {
                      color: props.seriesLabelColor,
                      fontSize: screenConfig.fontSizeY,
                      margin: 10,
                      formatter: function (value: any) {
                          return value;
                      },
                    },
                  },
                  {
                    type: 'category',
                    inverse: true,
                    axisTick: 'none',
                    axisLine: 'none',
                    show: true,
                    axisLabel: {
                      textStyle: {
                        color: props.rightFontColor,
                        fontSize: '13',
                      },
                      formatter: function (value: any) {
                        return value;
                      },
                    },
                    // data: value,
                    data: xValue,
                  },
                ],
                series: [
                  {
                    type: 'bar',
                    stack: 'total',
                    color: props.barColor,
                    barWidth: screenConfig.barWidth, // 柱子宽度
                    showBackground: true,
                    MaxSize: 0,
                    label: {
                      show: false,
                    },
                    data: xValue,
                  }
                ],
              };
              resolve(option);
            }
          });
    }
  })
}


</script>